<template>
  <el-menu
      :default-active="$route.path"
      background-color="#545c64"
      active-text-color="#ffd04b"
      class="el-menu-vertical-demo"
      text-color="#fff"
      router
  >
    <el-sub-menu :index="item.path" v-for="item in menus" :key="item.path">
      <template #title>
        <el-icon v-if="item.iconComponent">
          <component :is="item.iconComponent" />
        </el-icon>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path">
        {{ child.title }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import * as ElIcons from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/counter.js'
import { getMenuByUserType } from '@/menus.js'

const counter = useCounterStore()

const menus = computed(() => {
  const userType = counter.vo_user.value.useType
  const rawMenus = getMenuByUserType(userType)

  rawMenus.forEach(menu => {
    menu.iconComponent = ElIcons[menu.icon] || null
    if (menu.children) {
      menu.children.forEach(child => {
        child.iconComponent = ElIcons[child.icon] || null
      })
    }
  })

  return rawMenus
})
</script>
